<!DOCTYPE html><html lang="en-AU"><head>
	<meta charset="UTF-8">
	<title>HTML 5 Reference</title>
	  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
    <link rel="icon" type="image/png" href="../../iui/iui-favicon.png">
    <link rel="apple-touch-icon" href="../../iui/iui-logo-touch-icon.png" />
    <!--
    Don't enable web-app-capable yet, because the CSS is sized for having Safari's top bar
    <meta name="apple-mobile-web-app-capable" content="yes" />
    -->

    <link rel="stylesheet" href="../../iui/iui.css" type="text/css" />
    <link rel="stylesheet" title="Default" href="../../iui/t/default/default-theme.css"  type="text/css"/>
    <link rel="stylesheet" href="../../css/iui-panel-list.css" type="text/css" />
  	<link rel="stylesheet" href="../../iui/ext-sandbox/iscroll/iui-iscroll.css" type="text/css" />
  <link rel="stylesheet" href="../../iui/ext-sandbox/iscroll/iscroll.css" type="text/css" />
  <script type="application/x-javascript" src="../../iui/iui.js"></script>
  <script type="application/x-javascript" src="../../iui/ext-sandbox/iscroll/iscroll.js"></script>
  <script type="application/x-javascript" src="../../iui/ext-sandbox/iscroll/iui-iscroll.js"></script>
  <script>
  	iui.debug = true;  // enable portrait/landscape swapping in desktop browser for debugging
  </script>  
</head>
<body>

    <div id="iui-container">
      <div class="toolbar">
          <h1 id="pageTitle"></h1>
          <a id="backButton" class="button" href="#"></a>
      </div>

      <div id="home" title="HTML 5 Reference" selected="true">
        <div class="wrapper">
          <div class="scroller">
          </div>
        </div>
      </div>
    </div>
    
    
    <div id="iuipad-content-panel">
      <div class="toolbar">
          <h1 id="contentTitle"></h1>
          <a class="button leftButton" href="javascript:iui.popover_toc()" id="toc_button">TOC</a>
      </div>
      <div class="wrapper">
        <div class="scroller">
          <div id="iuipad-content">
          </div>
        </div>
      </div>
    </div>

  <iframe id="refsource" src="HTML 5 Reference.html" style="display: none"></iframe>
  
  <script>
    function getLinksFromOl(olEl, index, level) {
      if (olEl == null)
        return "";
      var links = olEl.querySelectorAll("ol > li > a");
      var listHTML = "<div id='toc-"+index+"-"+level+"'><div class='wrapper'><div class='scroller'><ul>";
      var newDivs = ""
      for (var i = 0; i < links.length; i++) {
        var sub_links = getLinksFromOl(links[i].parentElement.querySelector("ol"), i, level + 1);
        newDivs += sub_links;
        
        if (sub_links == "") {
          listHTML += "<li>";
          listHTML += links[i].outerHTML;
          listHTML += "</li>";
          link_id = links[i].hash.replace('#', '');
          newDivs += getContentById(link_id);
        } else {
          listHTML += "<li><a href='#toc-"+index+"-"+level+"-"+i+"'>";
          listHTML += links[i].innerHTML;
          listHTML += "</a></li>";
        }
        
      }
      listHTML += '</ul></div></div></div>';
      // document.getElementById("iui-container").innerHTML = document.getElementById("iui-container").innerHTML + newDivs;
      return newDivs + listHTML;
    }
    function getContentById(id) {
      if (id == null)
        return "";
      var contentEl = refsource.document.getElementById(id).parentElement;
      // var title = "";
      var title = contentEl.querySelectorAll("h1, h2, h3, h4, h5, h6")[0].innerText;
      return "<div class='content' title='"+title+"' id='"+link_id+"'>" + contentEl.innerHTML + "</div>";
    }
    function start() {
      var level = 1;
      var links = refsource.document.querySelectorAll("section > ol > li > a");
      var listEl = document.querySelector('#home .scroller');
      var listHTML = "<ul class='toc'>";
      var newDivs = ""
      for (var i = 0; i < links.length; i++) {
        var sub_links = getLinksFromOl(links[i].parentElement.querySelector("ol"), i, level + 1);
        newDivs += sub_links;
        if (sub_links == "") {
          listHTML += "<li>";
          listHTML += links[i].outerHTML;
          listHTML += "</li>";
          link_id = links[i].hash.replace('#', '');
          newDivs += getContentById(link_id);
        } else {
          listHTML += "<li><a href='#toc-"+i+"-2'>";
          listHTML += links[i].innerHTML;
          listHTML += "</a></li>";
        }
      }
      listHTML += '</ul>';
      listEl.innerHTML = listHTML;
      document.getElementById("iui-container").innerHTML = document.getElementById("iui-container").innerHTML + newDivs;
      // addEventListener("load", loadHandler, false);
      // addEventListener("click", clickHandler1, true);
      // addEventListener("click", clickHandler2, true);
      return false;
    }
	document.addEventListener("beforeinitiui", start, false);  // Run start() after DOM loaded, but before iUI is inited
    iuiScrollerLoaded();
  </script>
</body></html>